<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<title>网吧计费管理系统</title>
		<link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
		<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
		<script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
		<script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/http-vue-loader@1.4.2/src/httpVueLoader.min.js"></script>
		<script src="./conf.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- navigation -->
			<div class="app-header">
				<nav class="navbar navbar-default navbar-inverse" role="navigation">
					<div class="container-fluid">
						<div class="navbar-header">
							<a href="#" class="navbar-brand" @click="handleChangeView('main_view')">网吧计费管理系统</a>
						</div>
						<div class="collapse navbar-collapse navbar-left" id="example-navbar-collapse">
							<ul class="nav navbar-nav">
								<li><a href="#" @click="handleChangeView('register_user_view')">登记上机</a></li>
								<li><a href="#" @click="handleChangeView('cost_manage_view')">计费管理</a></li>
								<li class="dropdown">
									<a href="#" class="dropdown-toggle" data-toggle="dropdown">餐饮商品</a>
									<ul class="dropdown-menu">
										<li><a href="#" @click="handleChangeView('goods_manage_view')">商品管理</a></li>
										<li class="divider"></li>
										<li><a href="#" @click="handleChangeView('goods_add_view')">添加商品</a></li>
									</ul>
								</li>
								<li class="dropdown">
									<a href="#" class="dropdown-toggle" data-toggle="dropdown">积分礼品</a>
									<ul class="dropdown-menu">
										<li><a href="#" @click="handleChangeView('present_manage_view')">礼品管理</a></li>
										<li class="divider"></li>
										<li><a href="#" @click="handleChangeView('present_add_view')">添加礼品</a></li>
									</ul>
								</li>
								<li><a href="#" @click="handleChangeView('change_password')">用户管理</a></li>
							</ul>
						</div>
						<ul class="nav navbar-nav navbar-right">
							<li>
								<a href="#">
									<span class="glyphicon glyphicon-user"></span>
									欢迎您，<span>{{username}}</span>
								</a>
							</li>
						</ul>
					</div>
				</nav>
			</div>
			<!-- main container -->
			<div id="main-container" class="container-fluid">
				<component :is="main_view" style="width: 100%;"></component>
			</div>
		</div>
	</body>

	<script>
		let vm = new Vue({
			el: '#app',
			components: {
				'main_view': httpVueLoader('main.vue'),
				'register_user_view': httpVueLoader('RegisterUser.vue'),
				'goods_manage_view': httpVueLoader('GoodsManage.vue'),
				'goods_add_view': httpVueLoader('AddGoods.vue'),
				'cost_manage_view': httpVueLoader('CostManage.vue'),
				'present_manage_view': httpVueLoader('PresentManage.vue'),
				'present_add_view': httpVueLoader('AddPresent.vue'),
				'change_password': httpVueLoader('ChangePassword.vue')
			},
			data: {
				main_view: 'main_view',
				// main_view: 'cost_manage_view',
				username: '',
			},
			watch: {
				toWatch: function(val) {

				},
			},
			mounted() {
				$.ajax({
					url: conf.ur + "/doLogin",
					type: 'post',
					dataType: 'json',
					data: JSON.stringify({
						"username": "admin",
						"password": "admin"
					}),
					headers: {
						"Content-Type": "application/json"
					},
					success: (data) => {
						let sysUser = data.sysUser;
						this.username = sysUser.username;
						conf.storage.setItem('x-auth-token', sysUser.token);
						conf.storage.setItem('sysUser', JSON.stringify(sysUser));
					},
					error: (err) => {
						console.log("网络异常！")
					}
				});
			},
			methods: {
				//切换组件用
				handleChangeView: function(componentName) {
					this.main_view = componentName;
				},
			}
		})
	</script>

	<style>
		html,
		body {
			height: 100%;
			margin: 0px;
			padding: 0px;
		}

		#app {
			background-color: #999;
			height: 100%;
		}

		.app-header {
			background-color: #85d989;
			width: 100%;
			height: 50px;
		}

		#main-container {
			background-color: ghostwhite;
			width: 100%;
			position: absolute;
			top: 50px;
			bottom: 0px;
			left: 0px;
		}

		.jumbotron {
			background-color: ghostwhite;
		}
	</style>
</html>
